﻿<div [@routerTransition]>
    <div class="m-subheader">
        <div class="d-flex align-items-center">
            <div class="mr-auto">
                <h3 class="m-subheader__title m-subheader__title--separator">
                    <span>车间成本分析与报告</span>
                </h3>
                <span class="m-section__sub">
                    分析与报告
                </span>
            </div>
        </div>
    </div>

    <div class="m-content">


        <div class="row">
            <div class="col-12">
                <div class="m-portlet m-portlet--tabs">
                    <div class="m-portlet__head">
                        <div class="m-portlet__head-caption">
                            <div class="m-portlet__head-title">
                                <h3 class="m-portlet__head-text">
                                    {{ costChart3.selectedWorkshopData?.result1?.title }}
                                </h3>
                            </div>
                        </div>
                        <div class="m-portlet__head-tools">
                            <ul class="nav nav-tabs m-tabs-line m-tabs-line--right" role="tablist">
                                <li class="nav-item m-tabs__item" *ngFor="let item of costChart3.workshopData">
                                    <a class="nav-link m-tabs__link" [ngClass]="{ active: costChart3.selectedWorkshopData === item }" data-toggle="tab" role="tab"
                                        (click)="changeWorkshop(item)">
                                        {{ item.result1?.title }}
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="m-portlet__body">
                        <div class="row">
                            <div class="col-md-4 col-sm-12">
                                <div>
                                    <h5 class="m-widget14__title">
                                        {{ costChart3.selectedWorkshopData?.result1?.desc }}
                                    </h5>
                                </div>

                                <div class="m-widget4 m-widget4--chart-bottom m--margin-top-20">
                                    <div class="m-widget4__item" *ngFor="let row of costChart3.selectedWorkshopData?.result1?.data">
                                        <div class="m-widget4__ext">
                                            <a href="javascript:;" class="m-widget4__icon m--font-brand">
                                                <i class="fa flaticon-coins"></i>
                                            </a>
                                        </div>
                                        <div class="m-widget4__info">
                                            <span class="m-widget4__text">
                                                {{ row.name }}
                                            </span>
                                        </div>
                                        <div class="m-widget4__ext">
                                            <span class="m-widget4__number m--font-accent">
                                                {{ row.value }}</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="m-portlet-fit--sides" *ngIf="costChart3.selectedWorkshopData?.result1?.changeData" style="height:120px;">
                                    <ngx-charts-area-chart [results]="costChart3.selectedWorkshopData?.result1?.changeData" [customColors]="costChart3.customColors"></ngx-charts-area-chart>
                                </div>
                            </div>
                            <div class="col-md-1 col-sm-12"></div>

                            <div class="col-md-7 col-sm-12">
                                <div>
                                    <h5 class="m-widget14__title">
                                        {{ costChart3.selectedWorkshopData?.result2?.desc }}
                                    </h5>
                                </div>
                                <div class="m-widget11  m--margin-top-20">
                                    <div class="table-responsive">
                                        <table class="table">
                                            <thead>
                                                <tr>
                                                    <td class="m-widget11__app">成本类型</td>
                                                    <td class="m-widget11__change">趋势</td>
                                                    <td class="m-widget11__price">平均值</td>
                                                    <td class="m-widget11__total">总计</td>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr *ngFor="let stat of costChart3.selectedWorkshopData?.result2?.data">
                                                    <td>{{ stat.name }}</td>
                                                    <td>
                                                        <div class="m-widget11__chart" *ngIf="stat.changeData" style="height:50px; width: 200px">
                                                            <ngx-charts-line-chart [results]="stat.changeData" [showGridLines]="false" [animations]="false" [tooltipDisabled]="true"
                                                                [customColors]="costChart3.customColors" [curve]="costChart3.curve"></ngx-charts-line-chart>
                                                        </div>
                                                    </td>
                                                    <td>{{ stat.avg }}</td>
                                                    <td>{{ stat.sum }}</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-6 col-sm-12">
                <div class="m-portlet m-portlet--full-height">
                    <div class="m-portlet__head">
                        <div class="m-portlet__head-caption">
                            <div class="m-portlet__head-title">
                                <h3 class="m-portlet__head-text">
                                    车间最近产品成本变化
                                </h3>
                            </div>
                        </div>
                    </div>
                    <div class="m-portlet__body">
                        <div class="m-widget11">
                            <div class="table-responsive">
                                <table class="table">
                                    <thead>
                                        <tr>
                                            <td class="m-widget11__app">任务号/图号</td>
                                            <td class="m-widget11__change">名称</td>
                                            <td class="m-widget11__price">条码</td>
                                            <td class="m-widget11__total">变化值</td>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr *ngFor="let stat of costChart5.productChange">
                                            <td>
                                                <span class="m-widget11__title"> {{ stat.taskNum }}</span>
                                                <span class="m-widget11__sub"> {{ stat.drawingNum }}</span>
                                            </td>
                                            <td>
                                                {{ stat.productName }}
                                            </td>
                                            <td>{{ stat.batch }}</td>
                                            <td>
                                                <span *ngIf="stat.change > 0">+</span>{{ stat.change }}</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-6 col-sm-12">
                <div class="m-portlet m-portlet--full-height">
                    <div class="m-portlet__head">
                        <div class="m-portlet__head-caption">
                            <div class="m-portlet__head-title">
                                <h3 class="m-portlet__head-text">
                                    车间产品较大成本列表
                                </h3>
                            </div>
                        </div>
                    </div>
                    <div class="m-portlet__body">
                        <div class="m-widget11">
                            <div class="table-responsive">
                                <table class="table">
                                    <thead>
                                        <tr>
                                            <td class="m-widget11__app">任务号/图号</td>
                                            <td class="m-widget11__change">名称</td>
                                            <td class="m-widget11__price">条码</td>
                                            <td class="m-widget11__total">成本</td>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr *ngFor="let stat of costChart5.productValue">
                                            <td>
                                                <span class="m-widget11__title"> {{ stat.taskNum }}</span>
                                                <span class="m-widget11__sub"> {{ stat.drawingNum }}</span>
                                            </td>
                                            <td>
                                                {{ stat.productName }}
                                            </td>
                                            <td>{{ stat.batch }}</td>
                                            <td>
                                             {{ stat.change }}</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
